<!--suppress ALL -->
<template>
  <div class="business_box" v-if="showMe">

    <section class="business_top">
      <div class="blur_bg">
        <!--<img :src="this.store_img" width="100%" height="100%">-->
      </div>
      <div class="font_words">
        <div class="fw_top">
          <div class="fw_top_img">
            <img :src="this.store_img" alt="">
          </div>
          <div class="fw_top_word clear">
            <h3 class="ell">{{this.store_name}}</h3>
            <!--<p class="ell">公告：</p>-->
          </div>
          <!--<p class="shop_activity ell"><i class="new_user">减</i><span>{{ business_info.discount }}</span></p>-->
        </div>
      </div>

    </section>
    <!-- 切换按钮 -->
    <section class="change_show_type" ref="chooseType">
      <div>
        <span :class='{activity_show: changeShowType =="ordering"}' @click="changeShowType='ordering'">订桌</span>
      </div>
      <div>
        <span :class='{activity_show: changeShowType =="food"}' @click="changeShowType='food'">商品</span>
      </div>
      <!--<div>-->
        <!--<span :class='{activity_show: changeShowType =="rating"}' @click="changeShowType='rating'">评价</span>-->
      <!--</div>-->
    </section>

    <!--订餐-->
    <section class="business_ordering" v-bind:style="{ height: computedContentHeight + 'px' }" v-show="changeShowType == 'ordering'">
      <form class="from">
        <h1>姓名</h1>
        <input type="text" placeholder="name" ref="name">
        <h1>电话</h1>
        <input type="number" placeholder="phon" ref="phone">
        <h1>人数</h1>
        <input type="number" placeholder="people" ref="people">
        <h1>日期</h1>
        <input type="date" ref="date" style="line-height: inherit !important">
        <h1>时间</h1>
        <input type="time" ref="time" style="line-height: inherit !important">
        <div style="height: 1rem" />
        <input style="margin-bottom: 1rem;background: #0096FF;color: white" type="button" value="确认" @click="tordering">
      </form>
    </section>

    <!-- 商品 -->
    <section class="business_content" v-bind:style="{ height: computedContentHeight + 'px' }" v-show="changeShowType == 'food'">

      <ul class="business_left" ref="businessLeft">
        <li v-for="(item, index) in goods" :key="index" @click="leftControlRightScroll(index)" :class='{active_ia:index == 0}'>
          {{ item.name }}
          <span class="left_red" v-if="reNub[item.type_accumulation]">{{ reNub[item.type_accumulation] }}</span>
        </li>
      </ul>

      <ul class="business_right" ref="ullist">
        <li v-for=" (n, index) in goods " :key="index">

          <header class="type_title ell">
            <strong class="ell">{{ n.name }}</strong>
          </header>

          <section class="single_commodity" v-for=" (x, index) in n.foods " :key="index">
            <div class="single_l">
              <img :src="'data:image/png;base64,'+x.image_small" alt="">
            </div>
            <div class="single_r">
              <h4>{{ x.name }}</h4>
              <div class="add_remove">
                <span>￥{{ x.list_price }}</span>
                <div class="add_remove_btn" v-if="isAdd">
                  <svg @click="reduce_food(x.id)" v-if="shoppingCarList[x.id]">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
                  </svg>
                  <!-- ???? shoppingCarList[x.one_food_id][count] 会报错count未定义 改用 '.'就好了 ????-->
                  <span class="commodity_count" v-if="shoppingCarList[x.id]">{{ shoppingCarList[x.id].count }}</span>
                  <!-- nav_click_f(x.category_id, $event)内联$event传递DOM事件与其他参数 -->
                  <svg @click="add_food(n, x, $event)">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
                  </svg>
                </div>
              </div>
            </div>
          </section>

        </li>
      </ul>

    </section>
    <!-- 评价 -->
    <!--<section class="business_rating" v-bind:style="{ height: computedContentHeight + 'px' }" v-show="changeShowType == 'rating'">-->
      <!--<div class="mui-switch">-->
        <!--<div class="mui-switch-handle"></div>-->
      <!--</div>-->
    <!--<div class="total_evaluate clear">-->
      <!--<div class="total_code">-->
        <!--<h3>{{ business_info.shop_rating }}</h3>-->
        <!--<p class="p1">综合评价</p>-->
      <!--</div>-->
      <!--<div class="detail_code">-->
        <!--<p>-->
          <!--<span class="small_tit v-md">服务态度</span>-->
          <!--<YellowStar :code="4.5"></YellowStar>-->
          <!--<span class="orange_code  v-md">{{ business_info.service_code }}</span>-->
        <!--</p>-->
        <!--<p>-->
          <!--<span class="small_tit v-md">菜品评价</span>-->
          <!--<YellowStar :code="4.5"></YellowStar>-->
          <!--<span class="orange_code  v-md">{{ business_info.foods_code }}</span>-->
        <!--</p>-->
      <!--</div>-->
    <!--</div>-->
    <!--<div class="evaluate" v-for="(item, index) in business_info.evaluate" :key="index">-->
      <!--<div class="user_img">-->
        <!--<img src="../images/slider-pic/slider-pic2.jpeg" alt="">-->
      <!--</div>-->
      <!--<div class="evaluate_con">-->
        <!--<div class="evaluate_con_t flex_align">-->
          <!--<p class="user_name">{{ item.username }}</p>-->
          <!--<p class="user_time">{{ item.time }}</p>-->
        <!--</div>-->
        <!--<div class="evaluate_star">-->
          <!--<YellowStar :code="item.evaluate_code"></YellowStar>-->
        <!--</div>-->
        <!--<p class="evaluate_con_b">-->
          <!--{{ item.evaluate_details }}-->
        <!--</p>-->
      <!--</div>-->
    <!--</div>-->
  <!--</section>-->
    <!-- 购物车 -->
    <section class="shopping_car"  v-show="changeShowType == 'food'">
      <!-- 一个带条件的class 加一个固有class -->
      <div :class="['car_icon', { noting: !allNub }]" ref="carIcon" @click="shoppingCarShow = !shoppingCarShow;alertBoxShow = false;">
        <span class="tips_after" v-if="allNub !== 0">{{ allNub }}</span>
      </div>
      <div class="car_words">
        <h3 v-if="this.global.tableNumber === ''">请扫桌号下单</h3>
        <h4 v-if="this.global.tableNumber !== ''">￥{{ totalPrice }}</h4>
      </div>
      <a href="javascript:;" :class="['cartview', { cantpay: totalPrice <= 0 }]" @click="checkout();shoppingCarShow = false">下单</a>
    </section>

    <!-- 购物车列表 -->
    <section class="sp_lists" v-if="shoppingCarShow">

      <header>
        <span class="sp_words">购物车</span>
        <div class="clear">
          <svg>
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-remove"></use>
          </svg>
          <span @click="shoppingCarList = {};spChangeComputeAll();shoppingCarShow = false">清空</span>
        </div>
      </header>
      <ul class="sp_content">
        <li v-for="(item, index) in shoppingCarList" :key="index">
          <div class="food_name ell">
            {{ item.name }}
          </div>
          <div class="food_unit_price">
            ￥{{ item.list_price * item.count }}
          </div>
          <div class="food_nub">
            <svg @click="reduce_food(item.one_food_id)">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
            </svg>
            <span class="commodity_count" >{{ item.count }}</span>
            <svg @click="add_shopping_car(item.type_accumulation, item.type_name, item.name, item.one_food_id, item.list_price)">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
            </svg>
          </div>
        </li>
      </ul>
    </section>

    <!-- 弹出层 -->
    <section class="alert_box" v-if="alertBoxShow">
      <header>下单确认</header>
      <div class="con_info">
        总计￥{{ totalPrice }}
      </div>
      <footer>
        <div class="double_btn" @click="alertBoxShow = false"><font color="#4cd964">取消</font></div>
        <div class="double_btn" @click="paySuccess">确认</div>
      </footer>
    </section>
    <!-- 透明遮罩 -->
    <div class="mask" v-if="alertBoxShow || shoppingCarShow" @click="alertBoxShow = false;shoppingCarShow = false"></div>
  </div>
</template>
<script>
import YellowStar from './small_components/Yellow_star';
// 点手机虚拟返回键
// document.addEventListener('plusready', function () {
//   // 注册返回按键事件
//   plus.key.addEventListener('backbutton', function () {
//     // 事件处理
//   }, false);
// });
export default {
  name: 'business',
  data () {
    return {
      // 订单列表
      acordeonBody: [...document.querySelectorAll('.acordeon__body')],
      // 是否扫了桌号
      isAdd: false,
      // 店名
      store_name: '',
      // 店家图片
      store_img: '',
      goods: [],
      showMe: false,
      // 计算商品区域高度
      computedContentHeight: window.innerHeight - (window.innerWidth / 10 * 4.2),
      // 控制显示食物还是显示评价
      changeShowType: this.global.changeShowType,
      // 购物车列表
      shoppingCarList: {},
      // 大类数量
      reNub: {},
      // 购物车总数
      allNub: 0,
      // 商品总价格
      totalPrice: 0,
      // 最终价格（加运费）
      allTotalPrice: 0,
      // 是否弹出支付窗口
      alertBoxShow: false,
      // 是否弹出购物车
      shoppingCarShow: false
    };
  },
  mounted () {
    // 订餐列表
    this.$store.dispatch('setLoading', true);
    // 模拟加载
    var time = Math.floor(Math.random() * 2000);
    setTimeout(() => {
      this.$store.dispatch('setLoading', false);
      this.showMe = true;
    }, time);
    // 窗口大小改变，改变商品列高度
    window.addEventListener('resize', this.watchHei, false);
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.watchHei, false);
  },
  computed: {
    isLogin () {
      return this.$store.getters.getLogin;
    },
    // 通过id找到store中对应店铺信息
    business_info () {
      return this.$store.getters.getFalseBussinessInfo[this.$route.params.id];
    }
  },
  watch: { // 注意！！！！   watch对于对象来说deep=true也只能监控对象原有属性，新增加的无效！！！！
    // 监听showMe变化，在DOM更新后执行nextTick
    showMe: function (value) { // value就是showMe
      if (value) {
        this.$nextTick(() => {
          this.init();
        });
      }
    }
  },
  components: {
    YellowStar
  },
  methods: {
    tordering () {
      console.log('点击了订桌');
      this.$http
        .get(
          this.global.url + 'pos/write_pos_booktable?shou_id=' + this.global.imei + '&belonged_to_id=' + this.global.storeId + '&name=' + this.$refs.name.value + '&table_telephone=' + this.$refs.phone.value + '&table_time=' + this.$refs.date.value + '+' + this.$refs.time.value + ':00&pos_user_id=' + this.global.userid + '&table_people=' + this.$refs.people,
          {},
        {
          emulateJSON: true,
          header: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        )
        .then(response => {
          response = response.body;
          if (response['code'] === 1) {
            alert('已提交订桌');
            this.$refs.name.value = '';
            this.$refs.phone.value = '';
            this.$refs.date.value = '';
            this.$refs.time.value = '';
            this.$refs.people.value = '';
          } else {
            alert('提交失败，请检查输入的内容');
          }
        });
    },
    // 订餐列表
    openMenu (element) {
      let parent = element.target.parentNode;
      let lastChild = parent.lastElementChild;
      let menu = lastChild.firstElementChild;
      this.acordeonBody.map((el) => (el.style.height = 0));
      if (lastChild.clientHeight) {
        lastChild.style.height = 0;
      } else {
        let altoMenu = menu.clientHeight;
        lastChild.style.height = `${altoMenu}px`;
      }
    },
    getTarget (e) {
      if (e.target.tagName === 'DIV') {
        this.openMenu(e);
      }
    },
    // 初始化
    init () {
      this.rightControlLeftClass();
      // 给购物车添加animationend事件，动画结束后去掉有animation的class
      this.$refs.carIcon.addEventListener('animationend', () => {
        this.$refs.carIcon.classList.remove('tantantan');
      }, false);
    },
    // 右列表控制左列表样式
    rightControlLeftClass () {
      // 左目录列表
      var leftUl = this.$refs.businessLeft;
      // 左目录的所有li
      var leftLI = leftUl.getElementsByTagName('li');
      // 右商品列表
      var rightUl = this.$refs.ullist;
      var ti = rightUl.querySelectorAll('.type_title');
      // 定义当前滚动到的index值
      var asIndex = 0;
      // ↓ BUG（魅族自带浏览器 + UC无效果scroll不执行，安卓端chrome火狐正常 IOS 10.2正常)
      // 原因 某些浏览器不支持 forEach (UC,魅族自带,微信等) 改用 for 循环
      rightUl.addEventListener('scroll', () => {
        // 当前scrollTop
        var thisST = rightUl.scrollTop;
        // console.log('滚动条上去高度', this.scrollTop)
        // 算每个标题offsetTop来决定当前asIndex
        /* ti.forEach(function (e, i) {
          // console.log(e.offsetTop)
          if (thisST >= e.offsetTop) {
            // console.log(i)
            asIndex = i;
          }
        }); */
        for (var i = 0; i < ti.length; i++) {
          if (thisST >= ti[i].offsetTop) {
            // console.log(i)
            asIndex = i;
          }
        };
        // 给左目录列表所有的li去掉激活样式
        for (var j = 0, x = leftLI.length; j < x; j++) {
          leftLI[j].classList.remove('active_ia');
        }
        // 当前滚动到的li加激活样式
        leftLI[asIndex].classList.add('active_ia');
      }, false);
    },
    // 左列表点击控制右列表滚动
    leftControlRightScroll (index) {
      /**
       * [scrollMove 右侧Ul滚动，以当前scrollTop与目标的差值/10为滚动距离，滚动过远的话会有点生硬]
       * @param  {[DOM]} ele    [目标元素ul]
       * @param  {[Number]} target [滚动到的位置]
       * @return {[void]}        [description]
       */
      var scrollMove = (ele, target) => {
        // 根据当前scrollTop与目标点距离算出单次改变量
        var vector = Math.round((target - ele.scrollTop) / 10);
        console.log('vector', vector);
        var scrollTimer = setInterval(() => {
          ele.scrollTop += vector;
          // 超出目标点后 或者 已经滚动到底清空定时器
          // 上滑(scrollTop>=目标点 且 vector为正) 或 下滑(scrollTop <= 目标点 且 vector为负)或 滑到最底
          if (((ele.scrollTop >= target) && vector > 0) || ((ele.scrollTop <= target) && vector < 0) || ((ele.scrollTop + ele.clientHeight + 1) >= ele.scrollHeight)) {
            // +1 正确激活当前左栏状态
            ele.scrollTop = target + 1;
            clearInterval(scrollTimer);
          }
        }, 1000 / 100);
      };
      var rightUl_ = this.$refs.ullist;
      // 右列表应该滚动到的标题的offsetTop
      var rightTo_ = rightUl_.querySelectorAll('.type_title')[index].offsetTop;
      scrollMove(rightUl_, rightTo_);
    },
    // 监控网页的resize来改变商品列表的高度
    watchHei () {
      clearTimeout(heightTimer); // 节流
      var heightTimer = setTimeout(() => {
        this.computedContentHeight = window.innerHeight - (window.innerWidth / 10 * 4.2);
      }, 100);
    },
    // 列表中的加按钮点击
    add_food (n, x, e) { // n 为大类 x为大类种商品
      // 大类标记 c1 ,大类名字 热销榜 ,商品名 吮指原味鸡 ,单个商品id 100001 ,单价 11
      // console.log(n.type_accumulation, n.name, x.name, x.one_food_id, x.unit_price);
      this.add_shopping_car(n.type_accumulation, n.name, x.name, x.id, x.list_price);
      this.ball_fly(e);
    },
    // 向购物车添加
    add_shopping_car (type, typename, foodname, foodid, foodprice) {
      if (!this.shoppingCarList[foodid]) {
        this.shoppingCarList[foodid] = {
          'type_accumulation': type,
          'type_name': typename,
          'name': foodname,
          'one_food_id': foodid,
          'list_price': foodprice,
          'count': 1
        };
      } else {
        this.shoppingCarList[foodid].count++;
      }
      // 购物车改变 相关计算
      this.spChangeComputeAll();
    },
    // 减去单个食物--
    reduce_food (foodid) {
      // console.log(this.shoppingCarList[foodid].count);
      if (this.shoppingCarList && this.shoppingCarList[foodid].count > 0) {
        this.shoppingCarList[foodid].count--;
        this.shoppingCarList[foodid].count <= 0 && delete this.shoppingCarList[foodid];
      }
      // 购物车改变 相关计算
      this.spChangeComputeAll();
    },
    // 购物车改变 相关计算
    spChangeComputeAll () {
      // console.log('dasd', this.shoppingCarList);
      // 清空左列表数字 再次计算
      this.reNub = {};
      for (var x in this.shoppingCarList) {
        if (!this.reNub[this.shoppingCarList[x].type_accumulation]) {
          this.reNub[this.shoppingCarList[x].type_accumulation] = this.shoppingCarList[x].count;
        } else {
          this.reNub[this.shoppingCarList[x].type_accumulation] += this.shoppingCarList[x].count;
        }
      }
      // 计算总件数
      var key = 0;
      for (var j in this.reNub) {
        key += this.reNub[j];
      }
      this.allNub = key;
      // 计算总价格
      var allPrice = 0;
      for (var z in this.shoppingCarList) {
        // +=数量乘单价
        allPrice += this.shoppingCarList[z].count * this.shoppingCarList[z].list_price;
      }
      this.totalPrice = allPrice;
    },
    // 结账
    checkout () {
      // 弹出确认
      if (this.totalPrice > 0) {
        this.alertBoxShow = true;
      }
    },
    // 下单成功
    paySuccess () {
      let orderList = this.shoppingCarList;
      let dishesList = [];
      for (var id in orderList) {
        dishesList.push(orderList[id]);
        // console.log(orderList[id]);
      }
      this.axios({
        method: 'post',
        url: this.global.url + 'pos/write_order_details',
        headers: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          // imei: plus.device.imei,
          pos_user_id: this.global.userid,
          belonged_to_id: this.global.storeId,
          table_number: this.global.tableNumber,
          order_details: dishesList
        },
        transformRequest: [
          function (data) {
            data = 'json=' + JSON.stringify(data);
            console.log(data);
            return data;
          }
        ]
      }).then(res => {
        if (res.data['success'] === true) {
          alert('下单成功！');
          window.opener = null;
          window.open('#/order', '_self');
          window.close();
        } else {
          alert('下单失败' + JSON.stringify(res.data));
        }
        console.log();
      });
      this.alertBoxShow = false;
      this.shoppingCarList = {};
      this.spChangeComputeAll();
      // if (!this.isLogin) {
      //   alert('未登录');
      //   return;
      // }
      // var d = new Date();
      // var year = d.getFullYear();
      // var month = d.getMonth() + 1;
      // var day = d.getDate();
      // var hour = d.getHours();
      // var mins = d.getMinutes();
      // month = month < 10 ? ('0' + month) : month; // 3月 -> 03月
      // day = day < 10 ? ('0' + day) : day; // 3日 -> 03日
      // hour = hour < 10 ? ('0' + hour) : hour; // 3点 -> 03点
      // mins = mins < 10 ? ('0' + mins) : mins; // 3分 -> 03分
      // var orderTime = `${year}-${month}-${day} ${hour}:${mins}`;
      // var headerWord = () => {
      //   for (var s in this.shoppingCarList) {
      //     return this.shoppingCarList[s].name;
      //   }
      // };
      // var footerWord = this.allNub > 1 ? `等${this.allNub}件商品` : '';
      // var orderBriefInfo = headerWord() + footerWord;
      // console.log(orderBriefInfo);
      // var order = {
      //   'restaurant_id': this.business_info.id, // 店id
      //   'img_src': '',
      //   'store_name': this.business_info.shop_name, // 店名
      //   'order_birth_time': orderTime, // 订单时间
      //   'order_state': '订单已完成',
      //   'order_content': this.shoppingCarList, // 购物车
      //   'order_brief_info': orderBriefInfo, // 简略信息
      //   'order_price': this.allTotalPrice // 总价
      // };
      //
      // this.$store.dispatch('setOrder', order);
      // this.$router.replace('/order');
    },
    // 修改版抛球效果，使用css3中的贝塞尔曲线实现
    ball_fly (e) {
      // 被点元素位置
      var bound = e.target.getBoundingClientRect();
      var boundTop = bound.top;// 点击top值
      var boundLeft = bound.left;// 点击left值
      // 目标元素位置
      var target = this.$refs.carIcon;
      var targetData = target.getBoundingClientRect();
      var targetTop = targetData.top;// 目标top值
      var targetLeft = targetData.left;// 目标left值
      // 创建父球（父球横向运动）
      var father = document.createElement('div');
      father.className = 'father flyball';
      // 创建子球（子球垂直css3贝塞尔曲线运动，先上后下，得到抛球效果）
      var child = document.createElement('div');
      child.className = 'child inner';
      father.appendChild(child);
      // 设置父盒子生成的位置
      // father.style.cssText = 'top:' + boundTop + 'px;left:' + boundLeft + 'px;';
      father.style.top = boundTop + 'px';
      father.style.left = boundLeft + 'px';
      // append小球到页面中
      document.body.appendChild(father);
      setTimeout(() => {
        // 目标left - 所点元素left + 目标元素宽度的一半（修正落点）
        father.style.transform = 'translate3d(' + (targetLeft - boundLeft + targetData.width / 2) + 'px, 0px, 0px)';
        child.style.cssText = 'transform: translate3d(0px, ' + (targetTop - boundTop) + 'px, 0px);';
        // 运动结束后删掉小球
        setTimeout(() => {
          // 移除小球
          father.parentNode.removeChild(father);
          // 购物车添加弹弹弹的css
          this.$refs.carIcon.classList.add('tantantan');
        }, 500);
      }, 10);
    }
  },
  created () {
    this.$store.dispatch('setLoading', false);
    // 判断是否扫了桌子
    if (this.global.tableNumber !== '') {
      this.isAdd = true;
    }
    // 获取菜品
    this.$http
      .get(
        this.global.url + 'pos/get_goods_list?config_id=' + this.global.storeId,
        {},
      {
        emulateJSON: true,
        header: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
      )
      .then(response => {
        response = response.body;
        this.goods = response.goods;
        this.store_img = 'data:image/png;base64,' + response.image_icon;
        this.store_name = response.name;
      });
  }
};
</script>

<style lang="less">
.business_box{
  width:100%;
  height:100%;
  /* 头部 */
  .business_top{
    height:3rem;
    position:relative;
    .blur_bg{
      background: #0096FF;
      width:100%;
      height:100%;
      position:absolute;
      background-size: cover;
      -webkit-filter:blur(.08rem);
      filter:blur(.08rem);
      z-index: 1;
    }
    .font_words{
      width:100%;
      height:100%;
      position:absolute;
      padding: .3rem;
      box-sizing:border-box;
      z-index:2;
      .fw_top{
        .fw_top_img{
          img{
            width:3rem;
            height:1.8rem;
            border-radius: .1rem;
            float: left;
          }
        }
        .fw_top_word{
          margin-left:2rem;
          color:#fff;
          h3{
            font-size:.7rem;
          }
          p{
            font-size:.37rem;
          }
        }
        .shop_activity{
          font-size:.3rem;
          color:#fff;
          line-height:.8rem;
          .new_user{
            display:inline-block;
            width:.35rem;
            height:.35rem;
            background:rgb(240, 115, 115);
            line-height:.35rem;
            text-align:center;
            vertical-align:middle;
            font-style: normal;
            font-size:.25rem;
            margin-right: .1rem;

          }
          span{vertical-align:middle;}
        }
      }
    }
  }
  /* 切换按钮 */
  .change_show_type{
    height:1.2rem;
    div{
      width:50%;
      height:1.2rem;
      float:left;
      text-align:center;
      line-height:1.2rem;
      font-size:.45rem;
      background:#fff;
      span{
        &.activity_show{
          color:#3190e8;
          border-bottom: .05rem solid #3190e8;
          padding: .1rem .05rem;
        }
      }
    }
  }
  /* 底部购物车 */
  .shopping_car{
    height:1.2rem;
    width:100%;
    position:absolute;
    left: 0;
    bottom: 0;
    background:#3d3d3f;
    padding-left: 2rem;
    box-sizing:border-box;
    z-index:10;
    .car_icon{
      width:1.2rem;
      height:1.2rem;
      position:absolute;
      left:.2rem;
      top:-.25rem;
      background:url() #3190e8 center no-repeat;
      border: .12rem solid #444;
      box-shadow: 0 -.08rem .053333rem 0 rgba(0,0,0,.1);
      border-radius: 50%;
      background-size:60% auto;
      &.noting{
        background-color:#444;
      }
      .tips_after{
        background:#ff461d;
        color:#fff;
        font-size:.3rem;
        padding:.0rem .2rem;
        border-radius:.25rem;
        text-align:center;
        height:.5rem;
        line-height:.5rem;
        position:absolute;
        top:-.2rem;
        right:-.2rem;
      }

    }
    .car_words{
      color: #fff;
      h3{
        margin-top: 0.2rem;
        text-align: left;
        font-size: 0.7rem;
      }
      h4{
        text-align: left;
        font-size:1rem;
      }
      p{
        font-size:.3rem;
      }
    }
    .cartview{
      padding:0 .5rem;
      height:1.2rem;
      background: #4cd964;
      position:absolute;
      right:0;
      top:0;
      color: #fff;
      font-weight:600;
      font-size:.5rem;
      line-height:1.2rem;
      &.cantpay{
        background:#535356;
      }
    }
  }
  /* 评价 */
  .business_rating{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing:border-box;
    /* 总体评分 */
    .total_evaluate{
      background:#fff;
      margin-bottom:.25rem;
      .total_code{
        text-align:center;
        border-right: 1px solid #ccc;
        width:2.6rem;
        padding:.4rem;
        float:left;

        h3{
          font-size: .8rem;
          line-height: 1;
          font-weight: 400;
          color: #f60;
        }
        >.p1{
          font-size:.3rem;
          color:#666;
        }
        >.p2{
          font-size:.25rem;
          color:#aaa;
        }
      }
      .detail_code{
        margin-left:3rem;
        padding:.7rem 1.2rem;
        p{
          font-size:.4rem;
          color:#666;
          .orange_code{
            color: #f60;
            padding-left: .2rem;
            font-size:.4rem;
          }
          .small_tit{
            margin-right: .2rem;
          }
        }
      }
    }
    /* 内容 */
    .evaluate{
      background:#fff;
      border-bottom: 1px solid #ddd;
      padding:.2rem;
      .user_img{
        width:1rem;
        height:1rem;
        padding:.2rem;
        float:left;
        img{
          width:100%;
        }
      }
      .evaluate_con{
        margin-left:1.4rem;
        padding-right: .2rem;
        .evaluate_con_t{
          line-height:.7rem;
          .user_name{
            font-size:.4rem;
          }
          .user_time{
            color:#999;
            font-size:.35rem;
          }
        }
        .evaluate_star{

          font-size:.3rem;
        }
        .evaluate_con_b{
          padding: .1rem 0;
          font-size: .35rem;
        }
      }
    }

  }
  /*订餐*/
  .business_ordering{
    padding: 0.1rem;
    .from{
      height: auto;
      background: white;
    }
    h1{
      text-align: left;
      padding-top: .7rem;
      padding-left: 1rem;
      height: 2rem;
      font-size: .8rem;
   }
    input{
      width: 80%;
      height: 1.2rem;
      font-size: .5rem;
    }
  }
  /* 商品 */
  .business_content{
    padding-bottom:1.2rem;
    box-sizing:border-box;
    position:relative;
    ul{
      -webkit-overflow-scrolling: touch;
      overflow-y:auto;
      height:100%;
      &.business_left{
        width:2.5rem;
        float:left;
        li{
          padding:.45rem .3rem;
          font-size:.4rem;
          position:relative;
          border-bottom: 1px solid #ccc;
          position:relative;
          .left_red{
            background:#ff461d;
            color:#fff;
            position:absolute;
            right:0.08rem;
            top:0.08rem;
            font-size:.3rem;
            min-width: .4rem;
            text-align:center;
            border-radius:.2rem;
            padding:.02rem .05rem;
          }
        }
        li.active_ia{
          background:#fff;
          &:after{
            content:'';
            position:absolute;
            left:0;
            top:0;
            width:.1rem;
            height:100%;
            background:#3190e8;
          }
        }

      }
      &.business_right{
        margin-left:2.5rem;
        background:#fff;
        li{
          .type_title{
            padding:.2rem;
            box-sizing:border-box;
            width:100%;
            background:#f1f1f1;
            line-height:.6rem;
            strong{
              font-size: .45rem;
              color:#666;
            }
            span{
              font-size:.3rem;
              color:#999;
            }
          }
          .single_commodity{
            background:#fff;
            padding:.3rem;
            border-bottom: 1px solid #ccc;
            .single_l{
              width:1.5rem;
              height:1.5rem;
              img{
                width:1.5rem;
                height:1.5rem;
                padding-bottom: 0.2rem;
              }
              float: left;
            }
            .single_r{
              margin-left:1.7rem;
              h4{
                text-align: left;
                font-size:.5rem;
              }
              p{
                font-size:.32rem;
                color:#999;
              }
              .xiaolq{
                font-size:.4rem;
                color:#666;
              }
              .add_remove{
                margin-top:.2rem;
                height:.5rem;
                line-height:.5rem;
                font-size:.4rem;
                span{
                  float: left;
                  font-size:.45rem;
                  font-weight: 600;
                  color:#f60;
                  vertical-align:middle;
                }
                .add_remove_btn{
                  float:right;
                  .commodity_count{
                    color:#666;
                    margin:0 .15rem;
                  }
                  svg{
                    fill:#3190e8;
                    width:.5rem;
                    height:.5rem;
                    vertical-align:middle;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@-webkit-keyframes mymove{
   0%   { -webkit-transform: scale(1) }
   25%  { -webkit-transform: scale(.8) }
   50%  { -webkit-transform: scale(1.1) }
   75%  { -webkit-transform: scale(.9) }
   100% { -webkit-transform: scale(1) }
}
@keyframes mymove{
   0%   { transform: scale(1) }
   25%  { transform: scale(.8) }
   50%  { transform: scale(1.1) }
   75%  { transform: scale(.9) }
   100% { transform: scale(1) }
}
/* 购物车弹弹弹 */
.tantantan{
  -webkit-animation:mymove 1s;
  animation:mymove 1s;
}
.alert_box{
  width: 8rem;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
  font-size: .4rem;
  z-index: 10;
  border-radius:.14rem;
  overflow:hidden;
  text-align: center;
  header{
    font-size: .45rem;
    padding:.3rem;
  }
  .con_info{
    height: 3rem;
    line-height:2rem;
    border-top: .025rem solid #eee;
    border-bottom: .025rem solid #eee;
  }
  footer{
    height: 1.3rem;
    .double_btn{
      width: 50%;
      height: 1.3rem;
      float:left;
      line-height:1.3rem;
      &:nth-of-type(2){
        background:#4cd964;
        color:#fff;
      }
    }
  }
}
.mask{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
/* 购物车 */
.sp_lists{
  position:absolute;
  bottom:1.2rem;
  width:100%;
  left:0;
  background:#fff;
  z-index:9;
  font-size:.5rem;
  header{
    border-bottom: 1px solid #eee;
    padding:.25rem;
    height:.8rem;
    line-height:.8rem;
    color:#666;
    .sp_words{
      padding: 0 .15rem;
      border-left: .09rem solid #3190e8;
      font-size:.45rem;
    }
    .clear{
      float:right;
      font-size:.4rem;
      svg{
        width:.5rem;
        height:.5rem;
        vertical-align:text-top;
      }
    }
  }
  ul.sp_content{
    max-height: 6.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling:touch;

    li{
      height: 1.3rem;
      border-bottom: 1px solid #eee;
      padding: 0 .3rem;
      line-height:1.3rem;
      >div{
        float:left;
      }
      .food_name{
        width:50%;
        font-size:.4rem;
      }
      .food_unit_price{
        width:20%;
        text-align:right;
        color: #f60;
      }
      .food_nub{
        width:30%;
        text-align:right;
        svg{
          fill: #3190e8;
          width: .5rem;
          height: .5rem;
          vertical-align: middle;
        }
        span{
          vertical-align: middle;
        }
      }
    }
  }
}
/* 修正版抛球效果所需CSS */
.flyball {
    position:fixed;
    top:0;
    left:0;
    -webkit-transition:-webkit-transform .5s linear;
    transition:-webkit-transform .5s linear;
    transition:transform .5s linear;
    transition:transform .5s linear, -webkit-transform .5s linear
}
.flyball .inner {
    position:absolute;
    top:0;
    left:0;
    background-color:#3190e8;
    border-radius:50%
}
.flyball, .flyball .inner {
    will-change:transform;/* css3自带的开启GPU加速 */
    -webkit-transform:translateZ(0);
    transform:translateZ(0)
}
.flyball .inner {
    -webkit-transition:-webkit-transform .5s cubic-bezier(.3, -.2, 1, 0);
    transition:-webkit-transform .5s cubic-bezier(.3, -.2, 1, 0);
    transition:transform .5s cubic-bezier(.3, -.2, 1, 0);
    transition:transform .5s cubic-bezier(.3, -.2, 1, 0), -webkit-transform .5s cubic-bezier(.3, -.2, 1, 0)
}

/* 父盒子的样式 */
.father{
  width: .5rem;
  height:.5rem;
  position: fixed;
  z-index: 999;
}
/* 子盒子（小球）的样式 */
.child{
  width: .5rem;
  height:.5rem;
  background: #3190e8;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
